<template>
	<view class="activitySearch">
		<view class="search">
			<image src="../../static/img/left-icon-arrow.png" class="left-icon-arrow" @click="$api.leftBack()"></image>
			<text class="line"></text>
			<u-search height="58"
                v-model="historyValue"
                :action-text="actionText"
			placeholder-color="{width: 221rpx;height: 26rpx;font-size: 28rpx;font-family: PingFang;font-weight: 400;color: #6B6B6B;padding-left:18rpx}"
			border-color="{width: 584rpx;height: 58rpx;background: #F7F7F7;}"
			placeholder="请输入搜索关键词"
                @search="onSearch"
                @custom="onSearch"
                @change="onChange"
                @clear="onClear"
			></u-search>
		</view>
    <view class="history">
       <view class="label">
         <text>搜索历史</text>
         <image src="../../static/img/delete.png" v-if="historyList.length" @click="onDelHistory"></image>
	    </view>
	   <view class="historyList" :class="[!historyList.length?'isHistoryList':'']">
		   <block v-for="(item,index) in historyList" :key="index">
		   		  <view class="item-data" @click="onSelectHistory(item)">
					  <text>{{item}}</text>
				  </view>
		   </block>
       <u-empty v-if="!historyList.length" mode="history" icon-size="50"></u-empty>

     </view>
    </view>
    <view class="hotSearch">
      <text class="hot">
        <image src="../../static/img/icon-search.png"></image>
        <text>热门搜索</text>
      </text>
      <view class="hot-list" :class="[!hotList.length?'isHistoryList':'']">
        <block v-for="(item,index) in hotList" :key="item.id">
          <view class="hot-list-item"  @click="onHotItem(item)">
            <image :src="item.img"></image>
            <view class="right">
              <view class="h1">
                {{item.title}}
              </view>
              <view class="h4 h5"> {{item.time}}</view>
              <view class="h4 h6"> {{item.add}}</view>
              <view class="btn">
                <text> {{item.type}}</text>
              </view>
            </view>
          </view>
        </block>
        <u-empty v-if="!hotList.length" mode="list" icon-size="50"></u-empty>

      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  historyValue:'',//搜索的关键字
        actionText:"搜索",//搜索的提示
        historyList:[],//历史记录
        hotList:[
          {
            title:'重走游记小道，重温淳安县委成立 历程',
            add:'杭州当代美术馆（德信·杭州之翼综合体4号楼2层）',
            time:'2021.06.15-2021.07.26',
            img:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
            id:100
          }
        ], //热门搜索列表
			};
		},
    onLoad(){
		  this.getStorageSearchList()
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods:{
		  //获取缓存
      getStorageSearchList(){
        uni.getStorage({
          key: 'searchList',
          success:res=> {
            if(JSON.parse(res.data).length){
              this.historyList = JSON.parse(res.data)
            } else {
              this.historyList = []
            }
          }
        });
      },
      //点击列表记录的哪一项
      onSelectHistory(value){
        this.historyValue = value
      },
		  //删除历史记录
      onDelHistory(){
        uni.showModal({
          title: '提示',
          content: '是否要清除历史记录?',
          success:res=> {
            if (res.confirm) {
              uni.removeStorage({
                key: 'searchList'
              });
              this.$api.msg('清除成功')
              this.historyValue = ''
              this.historyList = []
            } else if (res.cancel) {
            }
          }
        });
      },
      //热门搜索列表详情
      onHotItem(item){
        console.log(item)
      },
      //清空的时候
      onClear(){

      },
      //开始搜索内容
      onHistoySearch(value){
        if(!value.length  ||!value.trim()){
          this.$api.msg('搜索内容不能为空')
          this.historyValue = ''
          return
        }
        if(!this.historyList.includes(value)){
          this.historyList.unshift(value)
          uni.setStorage({
            key:'searchList',
            data:JSON.stringify(this.historyList)
          })
        } else {
          let i=this.historyList.indexOf(value)
          this.historyList.splice(i,1)
          this.historyList.unshift(value)
          this.$api.msg(`${value}不能进行重复添加`)
          uni.setStorage({
            key:'searchList',
            data:JSON.stringify(this.historyList)
          })
        }
      },
      //修改时
      onChange(value){
        this.actionText =value.length?'取消':'搜索'
      },
      //搜索内容
      onSearch(value){
        this.onHistoySearch(value)
        this.historyValue = ''
      },
    }
	}
</script>

<style lang="scss" scoped>
.activitySearch{
	.search{
		position: relative;
		display: flex;
		justify-content: space-between;
    align-items: center;
    padding:30rpx 27rpx 0 23rpx;
    .line{
      width: 4rpx;
      height: 36rpx;
      background: #3389ED;
      position: absolute;
      left: 117rpx;
    }
		.left-icon-arrow{
			width: 16rpx;
			height: 29rpx;
      margin-right: 25rpx;
		}
    /deep/ .u-action{
      width: 53rpx;
      height: 26rpx;
      line-height: 26rpx;
      font-size: 28rpx;
      font-family: PingFang;
      font-weight: 500;
      color: #333333;
      margin-left: 22rpx;

    }
    /deep/ .uni-input-input{
      text-indent: 20rpx;
    }
	}
  .history{
    padding:47rpx 37rpx 0 31rpx;
    .label{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 41rpx;
      text{
        width: 109rpx;
        height: 26rpx;
        font-size: 28rpx;
        font-family: inpinheiti;
        font-weight: 400;
        color: #343434;
      }
      image{
        width: 28rpx;
        height: 30rpx;
      }
    }
    .historyList{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .item-data{
        margin: 0 60rpx 30rpx 0;
        height: auto;
        background: #F4F4F4;
        border-radius: 60rpx;
        text-align: center;
        white-space: nowrap;
        text{
          width: auto;
          height: auto;
          font-size: 28rpx;
          font-family: PingFang;
          font-weight: 400;
          color: #000000;
          display: inline-block;
          text-align: center;
          padding: 17rpx 25rpx;
        }
      }
    }
    .isHistoryList{
      justify-content: center;
      margin-top: 15%;
    }
  }
  .hotSearch{
    padding-top: 95rpx;
    .hot{
      padding-left: 30rpx;
      image{
        width: 18rpx;
        height: 21rpx;
      }
      text{
        padding-left: 13rpx;
        position: relative;
        width: 113rpx;
        height: 29rpx;
        font-size: 30rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #F20000;
        &:after{
          position: absolute;
          content: '';
          bottom: -17rpx;
          left: 31rpx;
          width: 76rpx;
          height: 4rpx;
          background: #E53A36;
        }
      }
    }
  }
  .hot-list{
    padding-top: 47rpx;
    .hot-list-item{
      padding: 0 40rpx 0 32rpx;
      display: flex;
      justify-content: flex-start;
      align-content: center;
      padding-bottom: 39rpx;
      image{
        width: 268rpx;
        height: 283rpx;
        border-radius: 15rpx;
      }
      .right{
        padding-left: 21rpx;
        .h1{
          width: 389rpx;
          height: 69rpx;
          font-size: 26rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #222222;
          line-height: 44rpx;
        }
        .h4{
          font-size: 18rpx;
          font-family: PingFang;
          font-weight: 400;
          color: #999999;
          line-height: 44rpx;
          width: auto;
          white-space: nowrap;
        }
        .h5{
          margin: 18rpx 0 13rpx 0;
        }
        .h6{
          margin-bottom: 7rpx;
        }
        .btn{
          width: 104rpx;
          border: 1px solid #3389ED;
          border-radius: 14rpx;
          margin-top: 20rpx;
          text{
            font-size: 18rpx;
            font-family: PingFang;
            font-weight: 400;
            color: #3389ED;
            display: block;
            white-space: nowrap;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
